<template>
    <div class="musicList">
        <div class="top">
            <div style="width: 10vw;">#</div>
            <div style="width: 20vw;">歌曲</div>
            <div style="width: 20vw;">歌手</div>
            <div style="width: 20vw;">专辑</div>
            <div style="width: 10vw;">时长</div>
        </div>
        <div v-if="data.length > 0" class="but">
            <div class="item" v-for="(item, index) in data " :key="index" @dblclick="handlePlaySong(item)">
                <div class="itemIndex">{{ index + 1 }}</div>
                <div class="like">
                    <div class="LikeHover">
                        <IsLike :id="item.id" :is="musicLikeListId.some(id => id === item.id)" />
                    </div>
                </div>
                <div class="itemName">{{ item.name }}</div>
                <div class="itemSongName"><span v-for="items in item.ar" :key="items.id"
                        @click="(event) => goSongName(event, items.id)" style="margin-left: 4px;">{{ items.name }}</span>
                </div>
                <div class="itemAl" @click="(event) => goAblum(event, item.al.id)"><span>{{ item.al?.name }}</span></div>
                <div class="itemDt">
                    <p style="display: inline;">{{ formateTime(item.dt) }}</p>
                    <el-tooltip :visible="listSubscripts === index" placement="bottom-start" :hide-after="0" trigger="click"
                        offset="0" :show-arrow="false" :popper-style="{ padding: '2px 0' }">
                        <template #content>
                            <div class="tooltip_div" @click="nextPlay(item)">下一首播放</div>
                            <el-tooltip placement="left-end" :hide-after="200" offset="0" :show-arrow="false"
                                :popper-style="{ padding: '2px 0' }">
                                <template #content>
                                    <div class="tooltip_div">
                                        <IsLike :id="item.id" :is="musicLikeListId.some(id => id === item.id)" />
                                        <div style="margin-left: 4px;width: 100px;">我喜欢的音乐</div>
                                    </div>
                                    <div class="tooltip_div item" v-for="(nestItem) in  userSongSheetList"
                                        :key="nestItem.id" @click="() => op(nestItem.id, 'add', item.id)">
                                        <svg t="1704962726298" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="3009" width="20" height="20">
                                            <path
                                                d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
                                                fill="#ffffff" p-id="3010"></path>
                                            <path d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                                                fill="#ffffff" p-id="3011">
                                            </path>
                                            <path d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                                                fill="#ffffff" p-id="3012">
                                            </path>
                                            <path d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                                                fill="#ffffff" p-id="3013">
                                            </path>
                                        </svg>
                                        <div class="aside_item"
                                            style="margin-left: 4px;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                            {{
                                                nestItem.name }}</div>
                                    </div>
                                </template>
                                <div class="tooltip_div">添加到歌单</div>
                            </el-tooltip>
                            <div class="tooltip_div" @click="(event) => goSongName(event, item.ar[0].id)">查看歌手</div>
                            <div class="tooltip_div" v-if="item.al.id" @click="(event) => goAblum(event, item.al.id)">查看专辑
                            </div>
                        </template>
                        <span class="span" v-click-outside="() => listSubscripts = -1"
                            @click="listSubscripts = index">···</span>
                    </el-tooltip>
                </div>
            </div>

        </div>
        <!-- 无数据状态 -->
        <el-empty v-else description="暂无歌曲，discovery一下吧" />
    </div>
</template>
<script setup lang="ts">
import { defineProps, toRefs, ref } from 'vue'
import useCounterStore from '../stores/counter'
import { useRouter } from 'vue-router'
import { opSongSheet } from '../api/songSheet/index'
import IsLike from './isLike.vue'
const router = useRouter()
const { musicLikeListId, playList, playIndex, userSongSheetList } = toRefs(useCounterStore())
const { formateTime, handlePlaySong } = useCounterStore()//获取pinia中的方法

const listSubscripts = ref<number>(-1)

defineProps({
    // 定义一个名为data的属性，类型为数组，默认值为空数组
    data: {
        type: Array<any>,
        default: []
    }
})

//将下一首播放的歌曲存放在pinia中
function nextPlay(item: any) {
    const index = playList.value.findIndex(
        (items: any) => items.id === item.id
    );
    if (index !== -1) {
        playList.value.splice(index, 1);
    }
    playList.value.splice(playIndex.value + 1, 0, item)
}
//将歌曲添加到歌单中
async function op(pid: number, op: string, tracks: number) {
    await opSongSheet({ pid, op, tracks })
}

//跳转歌手详情页
function goSongName(event: HTMLElementEventMap['click'], id: number) {
    event.stopPropagation()//阻止冒泡
    router.push({ path: '/singer/Details', query: { id } })
}
//跳转专辑详情页
function goAblum(event: HTMLElementEventMap['click'], id: number) {
    event.stopPropagation()//阻止冒泡
    router.push({ path: '/songs/allAlbums', query: { id } })
}


</script>

<style lang="scss" scoped>
.musicList {
    width: 100%;
    box-sizing: border-box;
    position: relative;


    .top {
        display: flex;
        align-items: center;
        color: #ccc;
        padding: 0 2vw;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .but {
        width: 100%;
        height: 100%;

        .item {
            height: 7vh;
            padding: 0 2vw;
            display: flex;
            align-items: center;
            cursor: pointer;

            div {
                height: 5vh;
                line-height: 5vh;
                color: #ccc;
                font-size: 12px;

                span:hover {
                    border-bottom: 1px solid #fff;
                }
            }

            .itemIndex {
                width: 3.5%;
            }

            .like {
                width: 9%;
                display: flex;
                align-items: center;
            }

            .LikeHover {
                width: 2.5vw;
                height: 2.5vw;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .LikeHover:hover {
                cursor: pointer;
                background-color: rgba(255, 255, 255, 0.2);
            }

            .itemName {
                width: 24.5%;
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .itemSongName {
                width: 25.5%;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .itemAl {
                width: 25%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .item:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .span {
            margin-left: 10px;
            padding: 4px;
            border-radius: 5px;
            border-bottom: 0 !important;
        }

        .span:hover {
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
        }
    }
}

.tooltip_div {
    width: 16vw;
    height: 3vw;
    line-height: 3vw;
    padding: 0 20px;
    display: flex;
    align-items: center;

}

.tooltip_div:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
}
</style>